<template>
	<view class="confirmorder">
		<view class="address_box">
			<image src="../../static/index/pop.png"></image>
			<view class="address">
				<view>{{name}} {{mobile}}</view>
				<view>{{province}}{{city}}{{area}}{{address}}</view>
				<view>期望上门时间：{{servetime}}</view>
			</view>
			<view class="icon">
				<u-icon name="arrow-right" size="20"></u-icon>
			</view>
		</view>
		<view class="order_info">
			<view class="goods">商品信息</view>
			<view class="item_box">
				<image :src="pic"></image>
				<view class="right">
					<view class="goods_name">
						<view>{{category_name}}</view>
						<view>x{{number}}</view>
					</view>
					<view class="tips">{{serve_type==1?'安装':'维修'}}</view>
					<view class="tips">{{fittings_status==0?'未到货':'已到货'}}</view>
				</view>
			</view>
		</view>
		<view class="notes_box">
			<view class="notes">需求备注:</view>
			<view class="notes_info">{{remarks}}</view>
		</view>
		<view v-if="type==4"></view>
		<view class="xuanshang" v-if="type==3">
			<view>悬赏金额</view>
			<input class="xsipt" placeholder="请输入您的期望价格" v-model="price" />
			<view>元</view>
		</view>
		<view class="pay_info" v-if="type==1">
			<view style="color: #333333;font-weight: bold;font-size: 28rpx;">付款信息</view>
			<view class="price">
				<view>商品总价</view>
				<view>￥{{orderprice}}</view>
			</view>
			<view class="price">
				<view>优惠券</view>
				<view><span class="sp">{{coupon_list[coupon].price}}</span> <u-icon style="display: inline-block;" name="arrow-right" size="20"
						@click="showCoupon(orderprice)"></u-icon>
				</view>
			</view>
			<view class="all">合计:<span>￥{{orderprice - coupon_list[coupon].price}}</span></view>
		</view>
		<view v-else class="xuanshang" v-if="type==2">
			<view>期望价格</view>
			<input class="xsipt" v-model="price" placeholder="请输入您的期望价格" />
			<view>元</view>
		</view>
		<view class="pay_btn" @click="payNow()">{{type==2?'立即报价':type==4?'立即下单':'立即付款'}}</view>

		<u-popup :show="show" mode="bottom" :round="16" closeOnClickOverlay @close="close">
			<view class="pop_box">
				<view class="my">我的优惠券</view>
				<scroll-view scroll-y="true" class="sview">
					<block v-if="coupon_list.length>0">
						<view class="pop_item" v-for="(item,index) in coupon_list" :key="item">
							<view class="left">
								<view class="money">￥<span style="font-size: 48rpx;">{{item.price}}</span></view>
								<view style="font-size: 28rpx;text-align: center;">满{{item.limit}}可用</view>
							</view>
							<view class="among">
								<view style="font-size: 28rpx;color: #333333;font-weight: bold;">{{item.name}}</view>
								<view>适用范围：全品类</view>
								<view>下单模式：{{item.order_type==1?'一口价':'悬赏'}}</view>
								<view>有效期至：{{item.enddate}}</view>
							</view>
							<view class="pop_right">
								<image v-if="coupon==index" src="../../static/index/select.png"></image>
								<view v-else class="pop_right_null" @click="coupon=index"></view>
								<!-- noselect -->
							</view>
						</view>
					</block>
					<block v-else>
						<view class="null">暂无可使用的优惠券</view>
					</block>
				</scroll-view>
				<view class="pop_btn" @click="show=false">确认</view>
			</view>
		</u-popup>
	
	<!-- 支付 -->
	<u-popup :show="pay_show" mode="bottom" :round="20" closeOnClickOverlay @close="down()" >
		<view class="pay_pop">
			<view>付款</view>
			<view v-if="type!=3" class="pay_num">{{orderprice - coupon_list[coupon].price}}</view>
			<view v-else class="pay_num">{{price}}</view>
			<view class="pay_item">
				<view style="display: flex;width: 60%;">
					<image class="pay_icon" src="../../static/wallet/ali.png"></image>
					<view class="text_pay">支付宝支付</view>
				</view>
				<image v-if="pay_type==1" class="sel_pay" src="../../static/wallet/yes.png"></image>
				<view class="pay_null" v-else @click="pay_type=1"></view>
				
			</view>
			<view class="pay_item">
				<view style="display: flex;width: 60%;">
					<image class="pay_icon" src="../../static/wallet/wx.png"></image>
					<view class="text_pay">微信支付</view>
				</view>
				<image v-if="pay_type==2" class="sel_pay" src="../../static/wallet/yes.png"></image>
				<view class="pay_null" v-else @click="pay_type=2"></view>
				
			</view>
			<view class="pay_item">
				<view style="display: flex;width: 60%;">
					<image class="pay_icon" src="../../static/wallet/mm.png"></image>
					<view class="text_pay">余额支付</view>
				</view>
				<image v-if="pay_type==3" class="sel_pay" src="../../static/wallet/yes.png"></image>
				<view class="pay_null" v-else @click="pay_type=3"></view>
			</view>
			<view class="pay_pop_btn" @click="orderPay()">确定</view>
		</view>
	</u-popup>
	</view>
</template>

<script>
	import store from '@/store/index.js'
	import {
		mapState
	} from 'vuex'
	import {coupon,createOrder,orderPay} from '../../api/index.js'
	export default {
		data() {
			return {
				coupon:0,
				show: false,
				type: 0,
				coupon_list:[],
				price:'',
				pay_show:false,
				pay_type:3,
				order_id:'',
				money:''
			}
		},
		onLoad(e) {
			this.type = e.type
		},
		onShow() {
			this.getFreeCoupon()
		},
		computed: {
			...mapState({
				name:state => state.name,
				order_type: state => state.order_type,
				categoryid_one: state => state.categoryid_one,
				categoryid_two: state => state.categoryid_two,
				images: state => state.images,
				pic:state => state.pic,
				number: state => state.number,
				userprice: state => state.userprice,
				mobile: state => state.mobile,
				province: state => state.province,
				city: state => state.city,
				area: state => state.area,
				address: state => state.address,
				servetime: state => state.servetime,
				remarks: state => state.remarks,
				number: state => state.number,
				category_name:state => state.category_name,
				serve_type:state => state.serve_type,
				fittings_status:state => state.fittings_status,
				orderprice:state => state.orderprice,
			})
		},
		methods: {
			close() {
				this.show = false
			},
			showCoupon(e){
				this.show=true
				this.money=e
			},
			getFreeCoupon(){
				let p = uni.getStorageSync('money')
				coupon(this.type,p).then(res=>{
					console.log(res,999999);
					this.coupon_list=res.data
				})
			},
			down(){
				this.pay_show=false
				uni.switchTab({
					url:"/pages/order/order"
				})
			},
			payNow(){
				if(this.type==1||this.type==4||this.type==3){
					let data = {
						order_type:this.$store.state.order_type,
						categoryid_one:this.$store.state.categoryid_one,
						categoryid_two:this.$store.state.categoryid_two,
						category_name:this.$store.state.category_name,
						serve_type:this.$store.state.serve_type,
						fittings_status:this.$store.state.fittings_status,
						images:this.$store.state.images,
						number:this.$store.state.number,
						name:this.$store.state.name,
						mobile:this.$store.state.mobile,
						province:this.$store.state.province,
						city:this.$store.state.city,
						area:this.$store.state.area,
						address:this.$store.state.address,
						servetime:this.$store.state.servetime,
						coupon_id:this.$store.state.coupon_id,
						longitude:this.$store.state.longitude,
						latitude:this.$store.state.latitude,
						remarks:this.$store.state.remarks,
						userprice:this.price
					}
					createOrder(data).then(res=>{
						console.log(res);
						this.order_id=res.data.order_id
						if(this.type==1||this.type==3){
							this.pay_show=true
						}else if(this.type==4){
							uni.showToast({
								icon:'success',
								title:res.msg
							})
							setTimeout(()=>{
								uni.switchTab({
									url:"/pages/order/order"
								})
							},500)
						}
					})
				}else{
					if(!this.price){
						uni.showToast({
							icon:'error',
							title:'请输入期望价格'
						})
					}else{
						let data = {
							order_type:this.$store.state.order_type,
							categoryid_one:this.$store.state.categoryid_one,
							categoryid_two:this.$store.state.categoryid_two,
							category_name:this.$store.state.category_name,
							serve_type:this.$store.state.serve_type,
							fittings_status:this.$store.state.fittings_status,
							images:this.$store.state.images,
							number:this.$store.state.number,
							name:this.$store.state.name,
							mobile:this.$store.state.mobile,
							province:this.$store.state.province,
							city:this.$store.state.city,
							area:this.$store.state.area,
							address:this.$store.state.address,
							servetime:this.$store.state.servetime,
							coupon_id:this.$store.state.coupon_id,
							longitude:this.$store.state.longitude,
							latitude:this.$store.state.latitude,
							remarks:this.$store.state.remarks,
							userprice:this.price
						}
						createOrder(data).then(res=>{
							console.log(res);
							uni.showToast({
								icon:'success',
								title:'报价成功'
							})
							setTimeout(()=>{
								uni.switchTab({
									url:"/pages/order/order"
								})
							},800)
						})
					}
				}
			},
			orderPay(){
				let p={
					order_id:this.order_id,
					type:this.pay_type,
					method:'app',
				}
				orderPay(p).then(res=>{
					console.log(res);
					uni.showToast({
						icon:'success',
						title:'支付成功'
					})
					setTimeout(()=>{
						uni.switchTab({
							url:"/pages/order/order"
						})
					},800)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.confirmorder {
		width: 100%;
		height: calc(100vh - 88px);
		background-color: #FAFAFA;
	}

	.address_box {
		width: 100%;
		height: 188rpx;
		background-color: #FFFFFF;
		padding: 34rpx 32rpx;
		display: flex;

		image {
			width: 28rpx;
			height: 30rpx;
			margin-top: 16rpx;
		}

		.address {
			margin-left: 32rpx;
			font-size: 24rpx;
			color: #333333;

			view {
				margin-top: 10rpx;
			}
		}

		.icon {
			margin-left: 212rpx;
			margin-top: 34rpx;
		}
	}

	.order_info {
		width: 100%;
		height: auto;
		min-height: 284rpx;
		padding: 32rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;

		.goods {
			color: #333333;
			font-size: 28rpx;
			font-weight: bold;
		}

		.item_box {
			width: 100%;
			height: 160rpx;
			margin-top: 24rpx;
			display: flex;

			image {
				width: 160rpx;
				height: 160rpx;
			}

			.right {
				width: 500rpx;
				height: 160rpx;
				margin-left: 32rpx;

				.tips {
					color: #666666;
					font-size: 28rpx;
					margin-top: 16rpx;
				}

				.goods_name {
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
				}
			}
		}
	}

	.notes_box {
		margin-top: 20rpx;
		width: 100%;
		height: auto;
		min-height: 168rpx;
		background-color: #FFFFFF;
		padding: 32rpx;
		display: flex;

		.notes {
			width: 140rpx;
			height: auto;
			color: #333333;
			font-size: 32rpx;
			font-weight: bold;
		}

		.notes_info {
			width: 548rpx;
			height: auto;
			min-height: 104rpx;
			padding: 16rpx;
			background-color: rgba(0, 204, 123, 0.05);
			color: #999999;
			font-size: 24rpx;
			line-height: 36rpx;
			border-radius: 8rpx;
			margin-left: 10rpx;
		}
	}

	.xuanshang {
		width: 100%;
		height: 104rpx;
		padding: 32rpx;
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;

		.xsipt {
			width: 480rpx;
			height: 100%;
			text-align: right;
			margin-left: 48rpx;
			font-size: 24rpx;
			color: #999999;
		}

		view {
			line-height: 40rpx;
		}
	}

	.pay_info {
		margin-top: 32rpx;
		width: 100%;
		height: 328rpx;
		padding: 32rpx;
		background-color: #FFFFFF;

		.price {
			width: 100%;
			height: 40rpx;
			margin-top: 32rpx;
			display: flex;
			justify-content: space-between;
			color: #333333;
			font-size: 28rpx;

			.sp {
				color: #FA5A28;
				font-size: 32rpx;
				margin-right: 20rpx;
			}
		}

		.all {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: right;
			border-top: 2rpx #FAFAFA solid;
			margin-top: 30rpx;

			span {
				color: #FA5A28;
				font-size: 32rpx;
				font-weight: bold;
				margin-left: 12rpx;
			}
		}
	}

	.pay_btn {
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		color: #FFFFFF;
		border-radius: 110rpx;
		margin: auto;
		margin-top: 312rpx;
		background-color: #00CC7B;
		font-size: 32rpx;
	}

	.pop_box {
		width: 100%;
		height: 748rpx;
		padding: 32rpx;
		background-color: #FAFAFA;
		border-radius: 16rpx;

		.my {
			width: 100%;
			height: auto;
			color: #000000;
			text-align: center;
			font-size: 32rpx;
		}

		.sview {
			width: 100%;
			height: 434rpx;
			margin-top: 32rpx;

			.pop_item {
				width: 100%;
				height: 212rpx;
				background-image: url("/static/index/popbg.png");
				background-size: cover;
				padding: 14rpx 32rpx;
				border-bottom: 20rpx;
				display: flex;
				.left {
					width: 200rpx;
					height: 100%;
					border-right: 2rpx rgba(250, 90, 40, 0.30) dashed;
					.money {
						color: #FA5A28;
						font-size: 26rpx;
						text-align: center;
						margin-top: 32rpx;
					}
				}

				.among {
					width: 350rpx;
					height: 100%;
					padding: 18rpx 16rpx;

					view {
						font-size: 20rpx;
						color: #666666;
						margin-bottom: 8rpx;
					}
				}

				.pop_right {
					width: 40rpx;
					height: 40rpx;
					margin-top: 72rpx;
					margin-left: 66rpx;

					image {
						width: 40rpx;
						height: 40rpx;
					}
					.pop_right_null{
						width: 40rpx;
						height: 40rpx;
						border-radius: 100%;
						border: 2rpx #999999 solid;
					}
				}
			}
		}

		.pop_btn {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background-color: #00CC7B;
			border-radius: 110rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			margin-top: 64rpx;
		}
	}
	.null{
		font-size: 34rpx;
		font-weight: bold;
		width: 100%;
		text-align: center;
		margin-top: 100rpx;
	}

    .pay_pop{
		width: 100%;
		height: 634rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background-color: #FFFFFF;
		padding: 32rpx;
		text-align: center;
		.pay_num{
			margin-top: 60rpx;
			color: #FA5A28;
			font-weight: bold;
			margin-bottom: 48rpx;
		}
		.pay_item{
			width: 100%;
			height: 48rpx;
			display: flex;
			margin-top: 32rpx;
			justify-content: space-between;
			.pay_icon{
				width: 48rpx;
				height: 48rpx;
				margin-right: 32rpx;
			}
			.text_pay{
				width: 60%;
				text-align: left;
				height: 48rpx;
				line-height: 48rpx;
				color: #666666;
				font-size: 28rpx;
			}
			.pay_null{
				width: 48rpx;
				height: 48rpx;
				border: 2rpx #999999 solid;
				border-radius: 100%;
			}
			.sel_pay{
				width: 48rpx;
				height: 48rpx;
			}
		}
		.pay_pop_btn{
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 128rpx;
			background-color: #00CC7B;
			color: #FFFFFF;
			margin-top: 140rpx;
		}
	}
</style>